<!DOCTYPE html>
<html>
  <head>
    <title>Travel modes in directions</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="script-tags-for-development.js"></script>
    <style>
      html, body {width:100%; height: 100%; padding:0; margin: 0}
      body {padding: 5px}
      * { box-sizing: border-box; }
    </style>
    <script>
      angular.module('ngMap').run(function($rootScope) {
        $rootScope.directions = [
          {origin:"Palo Alto", destination:"Gilroy", panelName:"p1"},
          {origin:"San Jose", destination:"Mountain View", panelName:"p2"}
        ];
      });
    </script>
  </head>
  <body ng-app="ngMap">

    <div ng-repeat="dir in directions">
      <div style="width: 68%; float:left; height:450px">
        <ng-map style="height:100%" >
          <directions
            draggable="false"
            travel-mode="DRIVING"
            panel="{{dir.panelName}}"
            origin="{{dir.origin}}"
            destination="{{dir.destination}}">
          </directions>
        </ng-map>
      </div>
      <div id="{{dir.panelName}}" style="width: 32%; float:left; height:450px"></div>
    </div>

  </body>

</html>
